<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>All about GIS Issue</title>
    <style>
      .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 250px;
        margin: 0 auto;
        border-radius: 1vw;
      }
      .form .opt,
      .btn {
        display: flex;
        justify-content: center;
        gap: 5px;
        width: 100%;
      }

      .btn {
        margin: 10px auto;
        gap: 20%;
      }
      input,
      select,
      textarea {
        flex: 1;
      }
      #desc {
        height: 50px;
      }
      .loading {
        display: none;
        width: 40px;
        height: 40px;
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .loading svg {
        width: inherit;
        height: inherit;
        animation: rotate 2s linear infinite;
      }
    </style>
  </head>
  <body>
    <div class="form">
      <div class="opt">
        <label for="title">标题</label>
        <input type="text" id="title" />
      </div>
      <div class="opt">
        <label for="link">链接</label>
        <input type="text" id="link" />
      </div>
      <div class="opt">
        <label for="lang">语言</label>
        <select name="lang" id="lang">
          <option value="中文" selected>中文</option>
          <option value="英文">英文</option>
          <option value="日文">日文</option>
          <option value="法文">法文</option>
          <option value="韩文">韩文</option>
        </select>
      </div>
      <div class="opt">
        <label for="topic">分类</label>
        <select name="topic" id="topic">
          <option value="文章" selected>文章</option>
          <option value="工具">工具</option>
          <option value="数据">数据分享</option>
        </select>
      </div>
      <div class="opt">
        <label for="desc">描述</label>
        <textarea id="desc" multiple style="height: 100px"></textarea>
      </div>
      <div class="btn">
        <div class="loading" id="loading">
          <svg
            t="1719611326700"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4287"
            width="200"
            height="200"
          >
            <path
              d="M782.065385 901.683615c10.892554 18.38743 4.796721 42.970626-14.290231 53.363521-18.687226 10.892554-42.470967 4.496926-53.063726-14.290232-11.392212-18.38743-4.796721-42.470967 13.690641-53.363521 19.386747-10.792622 42.770762-4.197131 53.663316 14.290232z m-230.342539 83.243095c0 21.285449-17.587977 39.07329-39.67288 39.07329-21.285449 0-39.07329-17.388114-39.07329-39.07329v-27.381282c0-21.785108 17.887772-39.173221 39.07329-39.173222 21.785108 0 39.67288 17.388114 39.67288 39.173222v27.381282z m-241.135162-44.169806c-11.092417 19.286816-35.175954 25.382649-53.663316 14.490095-18.987021-10.692691-25.682444-34.576364-14.490095-53.663316l29.080121-50.865229c11.192349-18.687226 35.175954-25.182785 54.162975-14.490094 18.38743 10.892554 25.182785 35.175954 13.990436 53.663316l-29.080121 50.865228zM123.415634 782.764907c-18.987021 10.592759-43.270421 4.197131-53.663316-14.490095-11.092417-18.38743-4.796721-42.770762 13.990436-53.663316l78.146579-45.269054c18.687226-10.392895 42.970626-4.496926 53.663317 14.490094 10.592759 18.38743 4.097199 42.770762-14.490095 53.663316l-77.646921 45.269055zM40.27247 551.822777c-21.785108 0-39.07329-17.587977-39.07329-39.073289 0-21.785108 17.288182-39.373085 39.07329-39.373085h121.716795c21.785108 0 39.07329 17.587977 39.07329 39.07329 0 21.785108-17.288182 39.373085-39.07329 39.373084H40.27247z m43.570216-241.534888c-18.987021-10.592759-25.182785-34.576364-13.990437-53.363521 10.392895-18.987021 34.576364-25.382649 53.663317-14.490095L255.82512 319.281741c18.687226 10.692691 24.88299 34.576364 14.490094 53.063726-11.092417 18.987021-35.175954 25.082854-53.563384 14.490095l-132.909144-76.547673z m158.591587-187.072119l92.137016 159.990632c11.192349 18.687226 35.175954 25.382649 53.86318 14.290231 18.687226-10.592759 24.88299-34.876159 13.990436-53.663316L309.888162 84.142481C299.295404 65.655119 275.311799 58.959696 256.824436 69.852249c-18.987021 10.892554-25.082854 34.976091-14.390163 53.363521z m230.642335-82.643505c0-21.285449 17.887772-39.373085 39.07329-39.373085 21.785108 0 39.67288 17.687909 39.672879 39.373085V224.846296c0 21.785108-17.587977 39.373085-39.672879 39.67288-21.285449 0-39.07329-17.288182-39.07329-39.67288V40.572265z m241.135161 43.570216c11.192349-18.987021 34.876159-25.182785 53.663316-14.490095 18.987021 10.592759 25.682444 34.576364 14.490095 53.663316l-92.336879 159.990632c-10.392895 18.687226-34.976091 25.282717-53.663316 14.490094-18.687226-10.892554-24.88299-35.175954-14.290231-53.963111l92.137015-159.690836z m187.671709 158.291792L741.692983 334.771153c-18.687226 10.592759-25.182785 34.576364-14.490094 53.663316 11.092417 18.38743 35.175954 24.583195 53.663316 14.290231l160.290426-92.336879c18.38743-10.592759 25.182785-34.576364 13.990436-53.363521-10.792622-18.987021-34.876159-25.782375-53.263589-14.590027z m82.34371 230.94213c21.984971 0 39.373085 17.587977 39.07329 39.373085 0 21.485313-16.988387 39.07329-39.07329 39.073289H799.753294c-21.285449 0-39.173221-17.587977-39.173222-39.373084 0-21.485313 17.887772-39.07329 39.173222-39.07329h184.473894z"
              fill="#999999"
              p-id="4288"
            ></path>
          </svg>
        </div>
      </div>
      <div class="btn" id="buttons">
        <button id="submit">创建</button>
        <button id="clear">清空</button>
      </div>
    </div>

    <script src="popup.js" defer></script>
  </body>
</html>
